<template>
  <div
    class="item"
    :style="{ flexDirection: type !== 'row' ? 'column' : 'row' }"
  >
    <div class="left">
      <div class="bar" :style="{ background: color }" v-if="hideBar"></div>
      <div class="title" :style="{ color }">{{ title }}</div>
    </div>
    <div :style="{ color }">{{ num }}</div>
  </div>
</template>
<script>
export default {
  name: "Status",
  props: {
    title: {
      default: "",
      type: String,
    },
    num: {
      default: "",
      type: String,
    },
    color: {
      default: "",
      type: String,
    },
    type: {
      default: "row",
      type: String,
    },
    hideBar: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.item {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  font-weight: bold;
  font-size: 24px;
  .left {
    display: flex;
    align-items: center;
  }
  .bar {
    width: 16px;
    height: 17px;
    border-radius: 2px;
    margin-right: 10px;
  }
  display: flex;
  .title {
    font-size: 20px;
    color: #ffffff;
  }
  .status {
    font-weight: 600;
    font-size: 24px;
    color: #69d9fe;
    text-align: center;
  }
}
</style>